<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery动态效果演示</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
//隐藏:hide
//显示:show
//括号内可以加时间 如hide(1000)
	$(document).ready(function(){
		
  		$("#hide").click(function(){
  			
  	  		$("p").hide();
  });
  		$("#show").click(function(){
  		
   	 		$("p").show();
  	});
  	
});


//淡出淡入效果
//可以设置变化速度fast,slow 时间
//$("button").click(function(){
 // $("#div1").fadeIn("slow",0.15);

	$(document).ready(function(){
		  $("#button1").click(function(){
		    $("#div1").fadeIn();
		    $("#div2").fadeIn("slow");
		    $("#div3").fadeIn(3000);
		    
		    
		  $("#button2").click(function(){
			$("#div1").fadeOut();
			$("#div2").fadeOut("slow");
			$("#div3").fadeOut(3000);
		  
		  });
		 
		});
	});
	//滑动	
	$(document).ready(function(){
		  $("#i").click(function(){
		    $("#div1").slideDown("slow");
		    $("#div2").slideDown("slow");
		    $("#div3").slideDown("slow");
		    //双击dblclick
		    //也可以控制效果的变化速度,slow,fast,毫秒
		  $("#i").dblclick(function(){
		    $("#div1").slideUp("slow");
		    $("#div2").slideUp("slow");
		    $("#div3").slideUp("slow");
		  	});
		  });
		});
	
	$(document).ready(function(){
		  $("#move").click(function(){
		    $("#en").animate({left:'250px'});
		  });
		});
	//写上+=
	//图形会变大,无限放大
	//animate有生命的
	$(document).ready(function(){
		  $("#big").click(function(){
		    $("#en").animate({
		      left:'250px',
		      height:'+=150px',
		      width:'+=150px'
		    });
		  });
		});
	
	$(document).ready(function(){
		  $("#rock").click(function(){
		    var div=$("#en");
		    //opacity 透明的
		    div.animate({height:'300px',opacity:'0.4'},"slow");
		    div.animate({width:'300px',opacity:'0.8'},"slow");
		    div.animate({height:'100px',opacity:'0.4'},"slow");
		    div.animate({width:'100px',opacity:'0.8'},"slow");
		  });
		});
	
	

</script>
</head>
<body>
	<p>啦啦啦啦啦</p>
	<button id="hide">隐藏</button>
	<button id="show">显示</button>
	
	<button id="button1">点击淡出 div 元素。</button>
	<button id="button2">点击淡入 div 元素。</button>
	<br><br>
	<div id="div1" style="width:200px;height:200px;display:none;background-color:red;"></div><br>
	<div id="div2" style="width:200px;height:200px;display:none;background-color:green;"></div><br>
	<div id="div3" style="width:200px;height:200px;display:none;background-color:blue;"></div>
	
	<button id="i">点击上下滑动</button>
	<button id="move">动</button>
	<button id="big">大大大 </button>
	<button id="rock">摇摇晃晃</button>
	
	<!--我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute  -->
	<div id ="en" style="background:#98bf21; height:200px;width:200px;position:relative;">
</div>

	
	
</body>
</html>